<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
<table border="1">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
    </tr>
</table>

<script>
    const arr = [
        {title:"小米手机" ,price:5000,num:100},
        {title: "华为手机",price:6000,num:200},
        {title: "苹果手机",price:7000,num:300},
        {title: "三星手机",price:8000,num:400},
        {title: "OPPO手机",price:9000,num:500},
    ]
    let tableE = document.querySelector('table');
    for (let i=0; i<arr.length;i++){
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        titleTd.innerHTML = arr[i].title;
        priceTd.innerHTML = arr[i].price;
        numTd.innerHTML = arr[i].num;
        trE.append(titleTd,priceTd,numTd);
        tableE.append(trE);

    }

</script>
</body>
</html>